<template>
  <!-- 导航栏 -->
  <van-nav-bar
    :title="TypeName"
    left-text="返回"
    left-arrow
    fixed
    placeholder
    z-index="1000"
    @click-left="back"
    @click-right="SearchShow = true"
  >
    <template #right>
      <van-icon name="search" size="20" />
    </template>
  </van-nav-bar>

  <!-- 下拉菜单 -->
  <van-sticky :offset-top="46">
    <van-dropdown-menu>
      <van-dropdown-item @change="TypeToggle" v-model="TypeActive" :options="TypeList" />
      <van-dropdown-item @change="FlagToggle" v-model="FlagActive" :options="FlagList" />
      <van-dropdown-item @change="SortToggle" v-model="SortActive" :options="SortList" />
      <van-dropdown-item @change="ByToggle" v-model="ByActive" :options="ByList" />
    </van-dropdown-menu>
  </van-sticky>

  <!-- 搜索框 -->
  <van-popup v-model:show="SearchShow" position="top">
    <van-search v-model="keywords" placeholder="请输入关键词" @search="search" />
  </van-popup>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <ul class="proul" v-if="list">
        <li v-for="(item,key) in list" :key="key">
          <router-link :to="{path:'/product/info',query:{proid:item.id}}">
            <van-image
              width="100%"
              height="300"
              fit="cover"
              :src="item.thumbs_text"
            />
          </router-link>

          <router-link :to="{path:'/product/info',query:{proid:item.id}}">
            <p class="tit">{{item.name}}</p>
          </router-link>
          <div class="price">
            <p>￥{{item.price}} / {{item.unit_text}}<span>￥8999</span></p>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>

  <!-- 返回顶部 -->
  <van-back-top />
</template>

<script setup>
const { proxy } = getCurrentInstance()

let TypeList = reactive([
  {text:'全部分类',value:'0'},
]);

let FlagList = [
  {text:'全部商品',value:'0'},
  {text:'新品',value:'1'},
  {text:'热销',value:'2'},
  {text:'推荐',value:'3'},
];

let SortList = [
  {text:'按上架时间',value:'createtime'},
  {text:'按价格',value:'price'},
  {text:'按库存',value:'stock'},
];

let ByList = [
  {text:'降序',value:'desc'},
  {text:'升序',value:'asc'},
];

let TypeActive = ref('0')
let FlagActive = ref('0') //标志 1-新品 2-热销 3-推荐
let SortActive = ref('createtime') //排序 上架时间 价格 库存
let ByActive = ref('desc') //desc 降序 asc 升序
let SearchShow = ref(false) //搜索框的显示
let keywords = ref('') //搜索关键词
let TypeName = ref('全部分类') //标题栏上面的分类名称

// 下拉刷新
let list =ref([]) //数据列表
let page =ref(1) //分页
let loading =ref(false) //加载状态
let finished =ref(false) //是否无更多数据
let refreshing =ref(false) //下拉刷新

// 生命周期
onBeforeMount(async()=>{
  type()
  load()
})

// 分页列表
const type = async()=>{
  var result = await proxy.$POST({
    url:'/product/type'
  })

  if(result.code == 0){
    proxy.$fail(result.msg)
    return false
  }

  result.data.map(item => {
    TypeList.push({text:item.name,value:item.id})
  })
}

// 返回上一页
const back = () =>proxy.$router.go(-1)

// 搜索事件
const search = async () =>{
  // 隐藏输入框
  SearchShow.value = false
  refreshing.value = true

  // 触发刷新效果
  refresh()
}

//分类切换
const TypeToggle = async (value) =>
{
  refreshing.value = true
  TypeActive.value = value
  refresh()
}

//属性切换
const FlagToggle = async (value) =>
{
  refreshing.value = true
  FlagActive.value = value
  refresh()
}

//排序切换
const SortToggle = async (value) =>
{
  refreshing.value = true
  SortActive.value = value
  refresh()
}

//升降序切换
const ByToggle = async (value) =>
{
  refreshing.value = true
  ByActive.value = value
  refresh()
}

// 下拉刷新
const refresh = async () =>{
  //可以去掉定时器
  setTimeout(() => {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true

    //加载数据方法
    load()
  }, 500)
}

//加载数据方法
const load = async () =>{
  // 判断是否为加载中的状态
  if(refreshing.value){
    refreshing.value = false
  }

  // 组装数据
  var params = {
    typeid:TypeActive.value,
    flag:FlagActive.value,
    sort:SortActive.value,
    by:ByActive.value,
    keywords:keywords.value,
    page:page.value
  }

  // 发送请求
  var result = await proxy.$POST({
    url:'/product/index',
    params
  })

  // 请求发送完毕后，加载状态也就完毕了
  loading.value = false

  // 如果没有更多数据了 就说明已经加载到底了
  if(result.code == 0){
    finished.value = true
    return;
  }

    TypeName.value = result.data.TypeName

    list.value = list.value.concat(result.data.list)
    page.value++
}


</script>
